<template>
  <i-circle
    :size="250"
    :trail-width="4"
    :stroke-width="5"
    stroke-linecap="square"
    :percent="percent"
    :stroke-color="color">
    <div
      class="demo-Circle-custom">
      <h1>{{ formatNumber }}</h1>
      <p>消费人群规模</p>
      <span> 总占人数 <i>{{ percent }}%</i> </span>
    </div>
  </i-circle>
</template>

<script>
export default {
  name: 'circle-2',
  props: {
    percent: {
      type: Number,
      default: 50
    },
    color: {
      type: String,
      default: '#2db7f5'
    },
    number: Number
  },
  computed: {
    formatNumber () {
      return this.number.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
    }
  }
}
</script>
